<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>

<body>
    <div id="app">

    </div>
</body>
<script>
    // Vue3  => Vue的第三个大版本修改  
    // 相较于Vue2  
    // 1. 选项式语法做了修改  

    // Vue2
    // var app = new Vue(options)   // Vue => 构造函数 => 生成Vue实例
    /* var app = new Vue({
        el:"#app",
        data:{
            a:1,
        },
        methods:{
            addA(){
                this.a++
            }
        },
        computed:{
            doubleA(){
                return this.a*2
            }
        },
        watch:{
            a:function(newVal,oldVal){
                console.log("a发生改变",newVal,oldVal);
            }
        }
    })  */

    // Vue3
    // 1. Vue  => 全局对象  => {createApp,nextTick,ref,reactive}
    // 2. Vue中对象存有创建引用的方法  var {createApp} = Vue;
    // 3. Vue3的选项式语法中 没有el属性 => 通过app.mount() 指定挂载的元素
    // 4. Vue3的选项式语法中 data是一个返回对象的函数  => 所有的组件均是如此 
    // 5. Vue3中 data methods computed 不在存储在Vue组件(实例)上  => 而是单独存储到一个对象上(代理对象 proxy)  =>  方法中的this默认都指向代理对象  => 取值和赋值都通过代理对象执行


    console.log(Vue);

    var { createApp } = Vue;
    var app = createApp({
        data() {
            return {
                a:10,
            }
        },
        methods:{
            addA(){
                this.a++
            }
        },
        computed:{
            doubleA(){
                return this.a*2
            }
        },
        watch:{
            a:function(newVal,oldVal){
                console.log("a发生改变",newVal,oldVal);
            }
        },
        mounted(){
            console.log("this->代理对象",this);
            console.log("this->代理对象",this.a);
            console.log("this->代理对象",this.doubleA);
            console.log("this->代理对象",this.addA);
        }
    })


    console.log("app", app);
    app.mount("#app");




</script>



</html>